// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: true;

// Insert your custom variables here.
// $base-color: #aa0000;

//********************
// core
//********************
$theme-name: 'steelblue';

$font-family: arial, helvetica, sans-serif;

$font-size  : 12px;

$base-gradient: 'glossy';

// $base-color: #354F6E;
$base-color: #28496C;
$neutral-color: #EEEEEE;



//********************
// boundlist
//********************
//background
$boundlist-background-color: #fff;

//borders
$boundlist-border-color: adjust-color($base-color, $hue: 0.58deg, $saturation: 25.146%, $lightness: -6.471%);
$boundlist-border-width: 1px;
$boundlist-border-style: solid;

$boundlist-item-padding: 2px;
$boundlist-item-border-width: 1px;
$boundlist-item-border-style: dotted;
$boundlist-item-border-color: $boundlist-background-color;

$boundlist-item-over-border-color: adjust-color($base-color, $hue: 6.952deg, $saturation: 5.848%, $lightness: -6.471%);
$boundlist-item-selected-border-color: darken($boundlist-item-over-border-color, 5);

$boundlist-item-over-background-color: #D9E8FB;
$boundlist-item-selected-background-color: #FFFBE0;




//********************
// btn-group
//********************
$btn-group-background-color: #F3F3F3;
$btn-group-border-color: adjust-color(#386E9E, $hue: -5deg, $saturation: -27%, $lightness: -6%);
// $btn-group-margin: 2px 0;
// $btn-group-padding: 0 1px;

$btn-group-inner-border-color: adjust-color(#386E9E, $saturation: -9%, $lightness: 8.5%);

// $btn-group-header-margin: 2px 2px 0 2px;
// $btn-group-header-font: normal ceil($font-size * .9) $font-family;
$btn-group-header-color: #FFFFFF;
// $btn-group-header-padding: 1px 0;
$btn-group-header-background-color: #386E9E;



//********************
// button
//********************
$button-arrow-size: 12px;
$button-split-size: 14px;
$button-icon-spacing: 4px;

$button-small-border-radius: 3px;
$button-small-border-width: 1px;
$button-small-padding: 2px;
$button-small-text-padding: 4px;
$button-small-font-size: ceil($font-size * .9); //11px
$button-small-icon-size: 16px;

$button-medium-border-radius: 3px;
$button-medium-border-width: 1px;
$button-medium-padding: 3px;
$button-medium-text-padding: 3px;
$button-medium-font-size: ceil($font-size * .9); //11px
$button-medium-icon-size: 24px;

$button-large-border-radius: 3px;
$button-large-border-width: 1px;
$button-large-padding: 3px;
$button-large-text-padding: 3px;
$button-large-font-size: ceil($font-size * .9); //11px
$button-large-icon-size: 32px;

//base colors for the default button
$button-default-base-color: adjust-color($neutral-color, $hue: 0deg, $saturation: -55.556%, $lightness: 10.745%) !default;
$button-default-base-color-over: #E4F3FF;
$button-default-base-color-focus: $button-default-base-color-over;
$button-default-base-color-pressed: #FFFBE0;
$button-default-base-color-disabled: adjust-color(#C0D4ED, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%);

$button-default-border-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -20.039%);
$button-default-border-color-over: adjust-color($button-default-base-color-over, $hue: 8.177deg, $saturation: -28.283%, $lightness: -14.745%);
$button-default-border-color-focus: $button-default-border-color-over;
$button-default-border-color-pressed: #DDB948;
$button-default-border-color-disabled: adjust-color($button-default-base-color-disabled, $hue: 0deg, $saturation: 0%, $lightness: -8.627%);

$button-default-background-color: $button-default-base-color;
$button-default-background-color-over: $button-default-base-color-over;
$button-default-background-color-focus: $button-default-background-color-over;
$button-default-background-color-pressed: $button-default-base-color-pressed;
$button-default-background-color-disabled: $button-default-base-color-disabled;

$button-default-background-gradient: 'glossy-button';
$button-default-background-gradient-over: 'glossy-button-over';
$button-default-background-gradient-focus: $button-default-background-gradient-over;
$button-default-background-gradient-pressed: 'glossy-button-pressed';
$button-default-background-gradient-disabled: 'glossy-button-disabled';

$button-default-color: #262626;
$button-default-color-over: $button-default-color;
$button-default-color-focus: $button-default-color-over;
$button-default-color-pressed: $button-default-color;
$button-default-color-disabled: lighten($button-default-color, 35);

/**
 * Toolbar buttons
 */
$button-toolbar-arrow-size: 12px;
$button-toolbar-split-size: 12px;

$button-toolbar-border-color: transparent;
$button-toolbar-border-color-over: adjust-color(#E4F3FF, $hue: 0.084deg, $saturation: -9.891%, $lightness: -18.039%);
$button-toolbar-border-color-focus: $button-toolbar-border-color-over;
$button-toolbar-border-color-pressed: #DDB948;
$button-toolbar-border-color-disabled: transparent;

$button-toolbar-background-color: transparent;
$button-toolbar-background-color-over: #E4F3FF;
$button-toolbar-background-color-focus: $button-toolbar-background-color-over;
$button-toolbar-background-color-pressed: #FFFBE0;
$button-toolbar-background-color-disabled: transparent;

$button-toolbar-background-gradient: null;
$button-toolbar-background-gradient-over: 'glossy-button-over';
$button-toolbar-background-gradient-focus: $button-toolbar-background-gradient-over;
$button-toolbar-background-gradient-pressed: 'glossy-button-pressed';
$button-toolbar-background-gradient-disabled: null;

$button-toolbar-background-gradient-color-stops: null;
$button-toolbar-background-gradient-color-stops-over: null;
$button-toolbar-background-gradient-color-stops-focus: $button-toolbar-background-gradient-color-stops-over;
$button-toolbar-background-gradient-color-stops-pressed: null;
$button-toolbar-background-gradient-color-stops-disabled: null;



//********************
// form
//********************
/**
 * @class Ext.form.field.Base
 */

$form-field-height: 22px;
$form-toolbar-field-height: 20px;
$form-error-icon-width: 18px;

//padding
$form-field-padding: 1px 3px;

//fonts
$form-field-font-size: $font-size;

$form-field-font-family: $font-family;
$form-field-font-weight: normal;
$form-field-font: $form-field-font-weight $form-field-font-size $form-field-font-family;
$form-field-color: #000;

$form-field-empty-color: gray;

//border
$form-field-border-color: #B5B8C8;
$form-field-border-width: 1px;

$form-field-focus-border-color: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%);
$form-field-invalid-border-color: #c30;

//background
$form-field-background-color: #fff;
$form-field-background-image: 'form/text-bg.gif';

$form-field-invalid-background-color: #fff;
$form-field-invalid-background-image: 'grid/invalid_line.gif';
$form-field-invalid-background-repeat: repeat-x;
$form-field-invalid-background-position: bottom;

/**
 * @class Ext.form.field.TextArea
 */
$form-textarea-padding: 2px 3px;

/**
 * @class Ext.form.Label
 */
$form-label-font-weight: normal;
$form-label-font-size: $font-size;
$form-label-font-family: $font-family;
$form-label-font: $form-label-font-weight $form-label-font-size $form-label-font-family;

/**
 * @class Ext.form.field.Checkbox
 */
$form-checkbox-image: 'form/checkbox.gif';
$form-checkbox-size: 13px;

/**
 * @class Ext.form.field.Radio
 */
$form-radio-image: 'form/radio.gif';


/**
 * Error messages
 */
//icons
$form-exclamation-icon: 'form/exclamation.gif';

//font
$form-error-msg-color: #c0272b;
$form-error-msg-font-weight: normal;
$form-error-msg-font-size: ceil($font-size * .9);
$form-error-msg-font-family: $font-family;
$form-error-msg-font: $form-error-msg-font-weight $form-error-msg-font-size $form-error-msg-font-family;
$form-error-msg-line-height: 16px;

/**
 * Trigger Field
 */
$form-trigger-width: 17px;
$form-trigger-height: $form-field-height;
$form-toolbar-trigger-height: $form-toolbar-field-height;

$form-trigger-border-bottom-width: 1px;
$form-trigger-border-bottom-style: solid;
$form-trigger-border-bottom-color: $form-field-border-color;
$form-trigger-border-bottom: $form-trigger-border-bottom-width $form-trigger-border-bottom-style $form-trigger-border-bottom-color;

$form-trigger-border-bottom-color-over: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%);
$form-trigger-border-bottom-color-focus: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%);
$form-trigger-border-bottom-color-focus-over: null;
$form-trigger-border-bottom-color-pressed: null;

$form-trigger-icon-background-position: 7px 6px;

/**
 * Fieldsets
 */
$fieldset-header-font-size: ceil($font-size * .9);
$fieldset-header-font-weight: bold;
$fieldset-header-font-family: $font-family;
$fieldset-header-line-height: 14px;
$fieldset-header-font: #{$fieldset-header-font-size}/#{$fieldset-header-line-height} $fieldset-header-font-weight $fieldset-header-font-family;
$fieldset-header-color: adjust-color($base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%);

$fieldset-border-width: 1px;
$fieldset-border-style: solid;
$fieldset-border-color: $form-field-border-color;
$fieldset-border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;

$fieldset-padding: 10px;
$fieldset-header-padding: 0 3px 1px;

/**
 * Sliders
 */
$horizontal-slider-thumb-width: 14px;
$horizontal-slider-thumb-height: 15px;

$vertical-slider-thumb-width: 15px;
$vertical-slider-thumb-height: 14px;



//********************
// grid
//********************
// ========= GRID BASE ===========
$grid-base-color: #C0D4ED;

// ========= GRID HEADER =========
$grid-header-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -16.078%) !default;
$grid-header-background-gradient: color-stops(#F3F3F3, #ECECEC);
$grid-header-border-color: $neutral-color;
$grid-header-over-border-color: adjust-color(#C0D4ED, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);
$grid-header-over-background-color: $grid-header-over-border-color;
$grid-header-over-background-gradient: 'grid-header-over';
$grid-header-background-color: #C6C6C6;
$grid-header-line-height: 15px;
$grid-header-padding: 3px 6px 4px;
$grid-header-trigger-height: 22px;
$grid-header-trigger-width: 14px;
$grid-header-color: null;

// ========= GRID ROWS ===========
// $grid-row-height: 20px;
// $grid-row-cell-color: null;
// $grid-row-cell-font-size: ceil($font-size * .9);
// $grid-row-cell-line-height: $grid-row-cell-font-size + 4;
// $grid-row-cell-font: normal #{$grid-row-cell-font-size}/#{$grid-row-cell-line-height} $font-family;

//row body
// $grid-row-body-font: normal 11px/13px $font-family;
// $grid-row-body-padding: 4px;

//row cell over
$grid-row-cell-over-border-color: #56BCFF;
$grid-row-cell-over-background-color: #DEF2FF;
$grid-row-cell-over-background-gradient: 'grid-row-over' !default;

//row cell selected
$grid-row-cell-selected-border-style: dotted !default;
$grid-row-cell-selected-border-color: #DDB948;
$grid-row-cell-selected-background-color: #FFFBE0;

//standard cells
// $grid-cell-inner-padding-top: 2px;
// $grid-cell-inner-padding-horizontal: 6px;
// $grid-cell-inner-padding-bottom: 3px;

// ======== GROUPED GRID =========
// $grid-grouped-title-font: bold ceil($font-size * .9) $font-family;
// $grid-grouped-title-padding: 4px 4px 4px 17px;



//********************
// layout
//********************
$border-layout-ct-background: #F3F3F3;

// $accordion-header-color: #000;
$accordion-header-background-color: #ECECEC;
$accordion-header-background-gradient: null !default;



//********************
// loadmask
//********************
$loadmask-opacity: 0.5;
$loadmask-backgorund: #CCCCCC;

$loadmask-msg-padding: 2px;
$loadmask-msg-border-color: #4994C4;
$loadmask-msg-background-color: #396F9F;
$loadmask-msg-background-gradient: null;

$loadmask-msg-inner-padding: 5px 10px 5px 25px;
$loadmask-msg-inner-icon: 'grid/loading.gif';
$loadmask-msg-inner-border-color: #28496C;
$loadmask-msg-inner-background-color: #F3F3F3;
$loadmask-msg-inner-color: #222;
$loadmask-msg-inner-font-size: ceil($font-size * .9); //11px
$loadmask-msg-inner-font-weight: normal;
$loadmask-msg-inner-font-family: $font-family;
$loadmask-msg-inner-font: $loadmask-msg-inner-font-weight $loadmask-msg-inner-font-size $loadmask-msg-inner-font-family;



//********************
// menu
//********************
//backgrounds
$menu-background-color: #F0F0F0 !default;
$menu-item-active-background-image: 'menu/menu-item-active-bg.gif';
$menu-item-active-background-color: #D9E8FB;

//border
$menu-item-active-border-color: adjust-color(#D9E8FB, $saturation: 23%, $lightness: -3%) !default;
$menu-separator-border-color: #E0E0E0 !default;
$menu-separator-background-color: #FFF !default;

//sizes
$menu-item-indent: 27px !default;
$menu-padding: 2px !default;
$menu-link-padding: 6px 2px 3px 32px !default;

//text
$menu-text-color: #222 !default;

//icons
$menu-icon-arrow: 'menu/menu-parent.gif';
$menu-icon-checked: 'menu/checked.gif';
$menu-icon-group-checked: 'menu/group-checked.gif';
$menu-icon-unchecked: 'menu/unchecked.gif';




//********************
// panel
//********************
// ========= BASE PANEL ==========
$panel-base-color: #F9F9F9;
$panel-border-color: #B5B8C8;

// ========= PANEL BODY ==========
// $panel-body-font-size: 10pt;

// ======== PANEL HEADER =========
//padding
// $panel-header-padding: 3px 5px 4px;
// $panel-header-vertical-padding: 5px 4px;

//fonts
// $panel-header-font-size: ceil($font-size * .9); //11px
// $panel-header-line-height: 17px;
$panel-header-font-weight: bold;

//background
$panel-header-background-gradient: color-stops(#386E9E, #28496C);


// UI defaults
$panel-header-border-color: $panel-border-color;
$panel-header-color: #FFFFFF;
$panel-header-background-color: #28496C;



//********************
// pickers
//********************
// color picker
$colorpicker-item-border-color: #aca899;
$colorpicker-over-border-color: #8bb8f3;
$colorpicker-over-background-color: #deecfd;

// date picker
$datepicker-base-color: $base-color;

$datepicker-border-color: adjust-color($datepicker-base-color, $hue: 5.926deg, $saturation: 4.444%, $lightness: -57.647%); //#1b376c
$datepicker-border-width: 1px;
$datepicker-border-style: solid;
$datepicker-border: $datepicker-border-width $datepicker-border-style $datepicker-border-color;
$datepicker-background-color: #FFFFFF;

$datepicker-next-image: 'shared/right-btn.gif';
$datepicker-prev-image: 'shared/left-btn.gif';
$datepicker-month-arrow-image: 'button/s-arrow-light.gif';
$datepicker-tool-sprite-image: 'tools/tool-sprites.gif';

$datepicker-header-background-color: adjust-color($datepicker-base-color, $hue: 5.768deg, $saturation: 0.419%, $lightness: -52.941%); //#23427c
$datepicker-header-background-gradient: color-stops(#386E9E, #28496C);

$datepicker-monthpicker-color: #FFFFFF;

$datepicker-th-color: adjust-color($datepicker-base-color, $hue: 5.586deg, $saturation: -4.167%, $lightness: -55.882%); //#233d6d
$datepicker-th-font-family: $font-family;
$datepicker-th-font-size: 10px;
$datepicker-th-font-weight: normal;
$datepicker-th-font: $datepicker-th-font-weight $datepicker-th-font-size $font-family;
$datepicker-th-background-color: #ECECEC;
$datepicker-th-background-gradient: color-stops(#F0F0F0, #ECECEC);
$datepicker-th-border-bottom-color: darken($datepicker-th-background-color, 20);
$datepicker-th-text-align: right;

$datepicker-td-height: 17px;

//item
$datepicker-item-color: #000;
$datepicker-item-border-width: 1px;
$datepicker-item-border-style: solid;
$datepicker-item-border-color: #fff;
$datepicker-item-border: $datepicker-item-border-width $datepicker-item-border-style $datepicker-item-border-color;

$datepicker-item-hover-background-color: #DEECFD;

$datepicker-today-item-border-color: #FF6666;

$datepicker-selected-item-border-width: 1px;
$datepicker-selected-item-border-style: solid;
$datepicker-selected-item-border-color: #DDB948;
$datepicker-selected-item-border: $datepicker-selected-item-border-width $datepicker-selected-item-border-style $datepicker-selected-item-border-color;
$datepicker-selected-item-background-color: #F9EDBE;

$datepicker-monthpicker-height: 167px;

$datepicker-monthpicker-item-color: adjust-color($datepicker-base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%); //#15428B
$datepicker-monthpicker-item-border: $datepicker-item-border;

$datepicker-monthpicker-item-hover-background-color: $datepicker-item-hover-background-color;

$datepicker-monthpicker-item-selected-background-color: #F9EDBE;
$datepicker-monthpicker-item-selected-border: $datepicker-selected-item-border;




//********************
// progress-bar
//********************
$progress-bar-base-color: $base-color;

$progress-height: 20px;

//borders
$progress-border-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -3.08%, $lightness: -23.725%);
$progress-border-width: 1px;
$progress-border-radius: 0;

//backgrounds
$progress-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -11.37%, $lightness: 7.451%);

//bar
$progress-bar-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: 8.187%, $lightness: -17.647%);

//text
$progress-text-color-front: #FFFFFF;
$progress-text-color-back: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -10.895%, $lightness: -43.725%);
$progress-text-text-align: center;
$progress-text-font-size: ceil($font-size * .9);
$progress-text-font-weight: bold;



//********************
// qtip
//********************
$tip-base-color: #FFFBE0;

//background
$tip-background-color: $tip-base-color;
$tip-background-gradient: null;

//text
$tip-body-color: #262626;
$tip-body-font-size: ceil($font-size * .9);
$tip-body-font-weight: normal;
$tip-body-padding: 3px;
$tip-body-link-color: darken($tip-body-color, 10%);

$tip-header-color: $tip-body-color;
$tip-header-font-size: $tip-body-font-size;
$tip-header-font-weight: bold;
$tip-header-padding: 3px 3px 0;  

//borders
$tip-border-color: #DDB948;
$tip-border-width: 1px;
$tip-border-radius: 3px;

//error tips
$tip-error-inner-border-color: #d87166;
$tip-error-border-color: #a1311f;
$tip-error-border-radius: 5px;
$tip-error-border-width: 1px;
$tip-error-background-color: #fff;



//********************
// tabs
//********************
//color
$tabbar-base-color: #ECECEC;
$tabbar-background-gradient: 'tabbar';

//background
$tab-base-color: #28496C;
$tab-base-color-over: #28496C;
$tab-base-color-active: #1F69AF;
$tab-base-color-disabled: #ECECEC;

$tab-background: $tab-base-color;
$tab-background-over: $tab-base-color-over;
$tab-background-active: $tab-base-color-active;
$tab-background-disabled: $tab-base-color-disabled;

$tab-color: #FFFFFF;
$tab-color-over: $tab-color;
$tab-color-active: $tab-color;
$tab-color-disabled: #A6A6A6;

$tab-font-size: ceil($font-size * .9); //11px

$tab-font-family: $font-family;

$tab-font-weight: normal;

$tab-background-gradient: color-stops(#386E9E, #28496C);
$tab-background-gradient-over: 'tab-over';
$tab-background-gradient-active: color-stops(#2381D5, #1F69AF);
$tab-background-gradient-disabled: color-stops(#F0F0F0, #ECECEC);

//borders
$tab-inner-border: true;

$tab-top-border-radius: 4px 4px 0 0;
$tab-top-border-width: 1px 1px 0 1px;
$tab-top-inner-border-width: 1px 1px 0;

$tab-bottom-border-radius: 0 0 4px 4px;
$tab-bottom-border-width: 0 1px 1px 1px;
$tab-bottom-inner-border-width: 0 1px 1px 1px;

$tab-border-color: $tab-base-color;
$tab-border-color-over: $tab-base-color-over;
$tab-border-color-active: $tab-base-color-active;
$tab-border-color-disabled: $tab-base-color-disabled;

$tab-inner-border-color: #386E9E;

//size
$tab-height: 20px;
$tab-spacing: 2px;

//tab bar body border and padding
$tabbar-top-body-border-width: 1px 1px 0;
$tabbar-top-body-padding: 1px 0 3px;
$tabbar-top-plain-body-border-width: 0;
$tabbar-top-plain-body-padding: 0 0 2px;
$tabbar-bottom-body-border-width: 0 1px 1px;
$tabbar-bottom-body-padding: 3px 0 1px;
$tabbar-bottom-plain-body-border-width: 0;
$tabbar-bottom-plain-body-padding: 3px 0 0;

//closable tab
$tab-closable-icon: 'tab/tab-default-close.gif';
$tab-closable-icon-width: 11px;
$tab-closable-icon-height: 11px;
$tab-closable-icon-top: 2px;
$tab-closable-icon-right: 2px;
$nbr-tab-closable-icon-top: 0px;
$nbr-tab-closable-icon-right: 0px;

//tab bar strip
$tabbar-strip-height: 3px;
$tabbar-strip-border-color: #28496C;
$tabbar-strip-background-color: #1F69AF;
$tabbar-top-strip-border-width: 1px 1px 0;
$tabbar-bottom-strip-border-width: 0 1px 1px;



//********************
// toolbar
//********************
// $toolbar-font-size: 10pt;

$toolbar-background-color: #ECECEC;
$toolbar-background-gradient: color_stops(lighten($toolbar-background-color, 3), $toolbar-background-color);

$toolbar-separator-color: #B6B6B6;

//text
// $toolbar-text-font-size: 10pt;
$toolbar-text-color: #262626;
$toolbar-text-padding: 3px 4px 0 4px;
$toolbar-text-line-height: 16px;



//********************
// window
//********************
$window-base-color: $base-color;

$window-border-radius: 5px 5px;
$window-border-width: 1px;
$window-border-color: #28496C;
$window-inner-border-width: 1px;
$window-inner-border-color: #396F9F;
$window-background-color: #28496C;

$window-body-border-width: 1px;
$window-body-border-style: solid;
$window-body-border-color: #B5B8C8;
$window-body-background-color: #F9F9F9;
$window-body-color: #000;

// $window-header-padding: 5px 5px 0;
$window-header-padding: 3px 5px 4px 5px;
$window-header-font-size: ceil($font-size * .9); //11px
$window-header-line-height: 17px;
$window-header-color: #FFFFFF;
$window-header-font-weight: bold;








@import 'ext4/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
// @include extjs-boundlist;
// @include extjs-button;
// @include extjs-btn-group;
// @include extjs-datepicker;
// @include extjs-colorpicker;
// @include extjs-menu;
// @include extjs-grid;
// @include extjs-form;
//     @include extjs-form-field;
//     @include extjs-form-fieldset;
//     @include extjs-form-file;
//     @include extjs-form-checkboxfield;
//     @include extjs-form-checkboxgroup;
//     @include extjs-form-triggerfield;
//     @include extjs-form-htmleditor;
// @include extjs-panel;
// @include extjs-qtip;
// @include extjs-slider;
// @include extjs-progress;
// @include extjs-toolbar;
// @include extjs-window;
// @include extjs-messagebox;
// @include extjs-tabbar;
// @include extjs-tab;
// @include extjs-tree;
// @include extjs-drawcomponent;
// @include extjs-viewport;

// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: true; // defaults to "../images/" when true